<template>
  <div class="my-padded-tb-large animate__animated animate__fadeInUp">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui blue header">分类</h3>
          </div>
          <div class="right aligned column">
            共 <h3 class="ui orange header my-inline-block">&nbsp;{{typeList.length}}&nbsp;</h3> 个
          </div>
        </div>
      </div>
      <!--所有分类-->
      <div class="ui attached segment my-padded-tb-large my-padded-large">
        <div v-for="type in typeList" class="ui labeled button my-margin-tb-tiny">
          <a @click="changeTypeId(type.id)" :class="typeId === type.id?'ui basic blue button':'ui basic button'">{{type.name}}</a>
          <div :class="typeId === type.id?'ui basic blue left pointing label':'ui basic left pointing label'">{{type.count}}</div>
        </div>
      </div>
      <!--博客和分页-->
      <keep-alive>
        <limit-page @getList="getTypeList" :page="page"></limit-page>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import LimitPage from "../components/LimitPage";
  import {getTypeListByLimit} from "../api/types";
  export default {
    name: "Types",
    components: {LimitPage},
    data() {
      return {
        page: {},
        users: this.$store.getters.AllUser,
        typeList: this.$store.getters.AllType,
        tagList: this.$store.getters.AllTag,
        typeId: this.$route.params.typeId
      }
    },
    activated() {
      if (this.$route.params.typeId!==undefined) {
        this.typeId = this.$route.params.typeId
        this.getTypeList(1)
      }
    },
    created() {
      if (this.typeId === undefined) {
        this.typeId = this.typeList[0].id
        this.getTypeList(1)
      }
    },
    methods: {
      getTypeList(page) {
        let data = {
          page,
          size: 6,
          typeId: this.typeId
        }
        getTypeListByLimit(data).then(res => {
          if (res.code === 200) {
            this.page = res.data
            this.initBlogList()
          }
        })
      },
      initBlogList() {
        // 设置每个博客的用户信息
        this.page.list.forEach(value => {
          this.users.forEach(value1 => {
            if (value.userId === value1.id) {
              value.nickname = value1.nickname
              value.avatar = value1.avatar
            }
          })
        })
        // 设置每个博客的分类信息
        this.page.list.forEach(value => {
          this.typeList.forEach(value1 => {
            if (value.typeId === value1.id) {
              value.type = value1.name
            }
          })
        })
        // 设置每个博客的标签信息
        this.page.list.forEach(value => {
          let arr = []
          this.tagList.forEach(tagValue => {
            value.tagIds.forEach(value1 => {
              if (tagValue.id === value1) {
                arr.push(tagValue.name)
              }
            })
          })
          arr.reverse()
          value.tags = arr
        })
      },

      changeTypeId(typeId) {
        if (this.typeId !== typeId) {
          this.typeId = typeId
          this.getTypeList(1)
        }
      }
    }
  }
</script>

<style scoped>

</style>
